<template>
    <div class="content">
        <div class="card">
            <div class="tableBox">
                <a-table :loading="loading"
                         childrenColumnName="childrenMenus"
                         :dataSource="tableData"
                         @change="changeTable"
                         :rowKey="(record , index) => {return record.id}"
                         :pagination="pagination"
                         :columns="columns">
                    <template #sn="{ text}">
                        <span style="color: #ff4d4f">{{text}}</span>
                    </template>
                    <template #nickname="{ text }">
                        <span style="color: #0FBA8E">{{text?.name}}</span>
                        <!--                        <span style="color: #ff4d4f">111</span>-->
                    </template>
                    <template #phone="{ text }">
                        <span style="color: mediumturquoise">{{text?.phone}}</span>
                    </template>
                    <template #address="{ text}">
                        <span style="color: #2c3e50">{{text?.detailAddress}}</span>
                    </template>
                    <template #action="{record}">
                        <a-button type="link" @click="detailHandle(record)">详情</a-button>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
    <!--  详情      -->
    <common-modal :data="modalData.formState" :visible="modalData.showAdd" :title="modalData.title" :typeName="modalData.typeName" @close="handleClose"></common-modal>
</template>

<script>
import {defineComponent, reactive, onMounted, toRefs} from "vue";
import {apiGetAllOrderList, apiGetOrderDetail} from "../../api";
import {message, Empty} from "ant-design-vue";
import commonModal from "../shopCenter/orderList/components/commonModal.vue";
export default defineComponent({
    name: "index",
    components: { commonModal},
    setup() {
        const tableDataObj = reactive({
            loading: false,
            tableData: [
                {}
            ],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            scroll: { x: 1000, y: 300 },
            columns: [
                {
                    title: "序号",
                    width: 80,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "订单号",
                    dataIndex: "sn",
                    key: "sn",
                    align: 'center',
                    width: 200,
                    slots: {
                        customRender: "sn"
                    },
                    ellipsis: true
                },
                {
                    title: "收货人",
                    dataIndex: "addressEntity",
                    key: "addressEntity",
                    align: 'center',
                    // width: 120,
                    slots: {
                        customRender: "nickname"
                    },
                    ellipsis: true
                },
                {
                    title: "手机号",
                    dataIndex: "addressEntity",
                    align: 'center',
                    // width: 200,
                    key: "addressEntity",
                    slots: {
                        customRender: "phone"
                    },
                    ellipsis: true
                },
                {
                    title: "收货地址",
                    dataIndex: "addressEntity",
                    key: "addressEntity",
                    align: 'center',
                    // width: 150,
                    slots: {
                        customRender: "address"
                    },
                    ellipsis: true
                },


                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    width: 200,
                    ellipsis: true
                },
                {
                    title: "操作",
                    key: "action",
                    align: 'center',
                    width: 150,
                    slots: {
                        customRender: "action"
                    }
                }
            ]
        })
        // 详细弹框数据
        const modalData = reactive({
            formState: {},
            showAdd: false,
            title: "",
            typeName: ""
        })
        // 获取列表
        const getList = () => {
            const params = {
                limit: tableDataObj.pagination.pageSize,
                page: tableDataObj.pagination.current
            }
            apiGetAllOrderList(params).then((res) => {
                if (res.data.code == 200) {
                    console.log(res.data)
                    tableDataObj.tableData = res.data.data.list
                    tableDataObj.pagination.total = res.data.data.totalCount
                }
            })
        }
        const changeTable = (pagination) => {
            // console.log('qwe', pagination)
            tableDataObj.pagination.pageSize = pagination.pageSize
            tableDataObj.pagination.current = pagination.current
            getList()
        }
        // 查看详情
        const detailHandle = (record) => {
            const params = {
                sn: record.sn
            }
            apiGetOrderDetail(params).then((res) => {
                if (res.data.code == 200) {
                    modalData.showAdd = true
                    modalData.title = "订单详情"
                    modalData.formState = res.data.data
                    modalData.typeName = "view"
                }
            }).catch((err) => {
                message.error('详情接口调用错误')
            })
        }
        // 关闭详情弹框
        const handleClose = () => {
            modalData.showAdd = false
        }
        onMounted(() => {
            getList()
        })
        return {
            ...toRefs(tableDataObj),
            changeTable,
            modalData,
            detailHandle,
            handleClose
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 100%;

    .card {
        height: 100%;
        //background: #364d79;
        margin: 10px;

        .button {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 15px;
        }
    }
}
</style>
